<template>
  <data-card title="部门管理">
    <template #right>
      <el-space>
        <el-button size="small" type="primary" @click="createdDepartment(0)">
          添加
        </el-button>
        <el-button size="small" type="success" :loading="loading" @click="getAdministerDepartment">
          {{ loading ? '加载中' : '刷新' }}
        </el-button>
      </el-space>
    </template>

    <el-table class="app-margin-top-interval" height="calc( 100vh - 195px)" :data="data" empty-text="尚未添加部门" border v-loading="loading" element-loading-text="玩命加载中" row-key="id">
      <el-table-column prop="id" width="110" label="ID" fixed="left" show-overflow-tooltip/>
      <el-table-column prop="name" min-width="150" fixed="left" label="名称" show-overflow-tooltip/>
      <el-table-column align="center" width="160" fixed="left" label="操作" show-overflow-tooltip>
        <template #default="{ row }">
          <el-space>
            <operate-link @tap="createdDepartment(row.id)">
              添加下级
            </operate-link>
            <operate-link @tap="updatedDepartment(row.id)">
              编辑
            </operate-link>
            <operate-link @tap="removeDepartment(row.id)" confirm="删除部门后不可恢复,确定要删除吗?">
              删除
            </operate-link>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="manage_id" label="负责人">
        <template #default="{ row }">
          {{ row?.manage?.nickname }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="sort" label="排序" show-overflow-tooltip/>
      <el-table-column min-width="170" prop="created_at" label="创建时间" show-overflow-tooltip>
        <template #default="{ row }">
          <show-time :time="row.created_at"></show-time>
        </template>
      </el-table-column>
    </el-table>
  </data-card>
</template>
<script setup lang="ts">
import {ref, onBeforeMount} from 'vue'
import {createdDepartmentApi, updatedDepartmentApi, getAdministerDepartmentApi, removeDepartmentApi} from "@/apps/admin/api/admin/department";
import {usePopupForm} from "@/components/FunctionComponents";

const loading = ref<boolean>(false)

/**
 * 组织部门数据
 */
const data = ref<any[]>([]);

/**
 * 获取部门数据
 */
async function getAdministerDepartment() {
  loading.value = true;
  const result = await getAdministerDepartmentApi()
  if (result.code === 200) {
    data.value = result.data
  }
  loading.value = false;
}


/**
 * 新建部门
 * @param pid
 */
function createdDepartment(pid: number) {
  usePopupForm({
    api: createdDepartmentApi,
    width: "540px",
    query: {pid},
    onSuccess: getAdministerDepartment
  })
}


/**
 * 编辑部门
 * @param id
 */
function updatedDepartment(id: number) {
  usePopupForm({
    api: updatedDepartmentApi,
    width: "540px",
    query: {id},
    onSuccess: getAdministerDepartment
  })
}


/**
 * 删除部门
 * @param id
 */
function removeDepartment(id: number) {
  removeDepartmentApi(id).then(result => {
    if (result.code === 200) {
      getAdministerDepartment()
    }
  })
}

onBeforeMount(getAdministerDepartment)
</script>